<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>接口测试文档</h2>

    省份<input type="text" class="province">
    城市<input type="text" class="city">

    <button>测试</button>
    <ul class="list">
        <li></li>
    </ul>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        const btn= document.querySelector('button');
        const province= document.querySelector('input[class=province]');
        const city= document.querySelector('input[class=city]');
        const ul= document.querySelector('.list');
        btn.addEventListener('click', function () {
            // axios.get('http://ajax-api.itheima.net/api/province').then((res)=>console.log(res))
            // axios.get('http://ajax-api.itheima.net/api/area',{params:{pname:'广西壮族自治区',cname:'桂林市'}}).then((res)=>console.log(res))
            // axios.get('http://ajax-api.itheima.net/api/area?pname=广西壮族自治区&cname=柳州市').then((res)=>{console.log(res)})
            // axios({
            //     url:'http://ajax-api.itheima.net/api/area',
            //     method:'GET',
            //     params:{
            //         pname:'江苏省',
            //         cname:'苏州市'
            //     }
            // }).then((res)=>console.log(res))
            // axios({
            //     url:'http://ajax-api.itheima.net/api/area?pname=浙江省&cname=杭州市',               
            // }).then(({data:res})=>{
            //     const {data}=res
            //     console.log(data)
            // })
            const pname=province.value
            const cname=city.value
            axios({
                url:'http://ajax-api.itheima.net/api/area',
                method:'GET',
                params:{
                    pname,
                    cname
                }

            }).then(({data:res})=>{
                const {data} =res
                ul.innerHTML=data.map((item)=>{
                    return `<li>${item}</li>`
                }).join('')
            })
        });

    </script>
</body>
</html>